import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { AtToast } from "taro-ui"
import { post } from '../../service/api'
import Dialog from '../../components/login'

import './index.scss'

class CompanyDetail extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      info: {},
      faList: [],
      collect: false,
      total: 0,
      isShowDialog: false,
      isShowToast: false,
      msg: '',
      login: false
    }
  }
  config = {
    navigationBarTitleText: '公司首页',
  }


  async favoriteAdd(id, e) {
    e.stopPropagation();
    const { data } = await post('favorite/addupdate', {
      targetId: id,
      crudType: "add"
    })
    if (data.code == 0) {
      this.pageList()
      this.pop('收藏成功')
    } else {
      this.setState({
        isShowDialog: true
      })
    }
  }
  async favoriteDel(id, e) {
    e.stopPropagation();
    let arr = [];
    arr.push(id)
    const { data } = await post('favorite/addupdate', {
      targetId: JSON.stringify(arr),
      crudType: "delete"
    })
    if (data.code == 0) {
      this.pageList()
      this.pop('取消收藏')
    } else {
      this.setState({
        isShowDialog: true
      })
    }
  }

  async pageList() {
    const { id } = this.$router.params, { data } = await post('anli/findPageList', {

      cId: id,
      pageNo: 1,
      pageSize: 2
    })
    if (data.code == 0) {
      this.setState({
        faList: data.rows,
        total: data.total
      })
    }
  }
  async getInfo() {
    const { id } = this.$router.params,
      { data } = await post('company/findById', {
        id
      })
    if (data.code == 0) {
      this.setState({
        info: data.info
      })
    }
  }
  async cardFind() {
    const { data } = await post('vipCard/find');
    if (data.code == 0) {
      this.setState({
        login: true
      })
    }
  }
  toPageDesign() {
    const { id } = this.$router.params;
    Taro.navigateTo({ url: `/pages/design/index?id=${id}` })
  }
  toProgram(item) {
    let { login } = this.state, number = Taro.getStorageSync('number');
    number ? Taro.setStorageSync('number', ++number) : Taro.setStorageSync('number', 1)
    if (login) {
      Taro.navigateTo({ url: `/pages/program/index?id=${item._id}` })
    } else {
      if (number > 20) {
        this.setState({
          isShowDialog: true
        })
        return;
      }
      Taro.navigateTo({ url: `/pages/program/index?id=${item._id}` })
    }
  }
  handleDialog() {
    this.setState({
      isShowDialog: false
    })
  }
  pop(msg) {
    this.setState({
      isShowToast: true,
      msg: msg
    }, () => {
      setTimeout(() => {
        this.setState({
          isShowToast: false
        })
      }, 1500)
    })
  }
  componentDidMount() {
    this.getInfo();
    this.pageList()
    this.cardFind()
  }
  render() {
    const { info, faList, total, isShowToast, msg } = this.state;
    return (
      <View className='company-detail'>
        <View className="d-img-cover">
          <Image className="img" src="http://huanlejiam.xhtol.com/static/img/bg.8b629ec.png" />
        </View>
        <View className="d-name">
          <Image className="logo" src={info.logo} />
          <View className="d-right">
            <View className="d-title">{info.coName}</View>
            <View className="d-address">{info.address ? info.address : ""}</View>
          </View>
        </View>
        <View className="d-recommend-box">
          <View className="d-title">企业介绍</View>
          <View className="d-recommend">{info.remark}</View>
        </View>
        <View className="design">
          <View className="design-title">装修设计
            <Text className="d-number">({total})</Text>
            <View className="more" onClick={this.toPageDesign.bind(this)}>更多<Image className="img" src={require('../../asset/imgs/left.png')} /></View>
          </View>
          <View className="d-list">
            {faList.map((item) => {
              return (
                <View className="d-item" key={item._id} onClick={this.toProgram.bind(this, item)}>
                  <View className="design-bg">
                    <Image className="design-logo" src={item.logo} />
                    <View className="qj">360°全景</View>
                    <View className="plot-name">{item.lpName}</View>
                    <View className="collect">
                      <Image className={item.isFavorite ? (item.isFavorite == '1' ? "img" : "none") : "img"} onClick={this.favoriteAdd.bind(this, item._id)} src={require('../../asset/imgs/favorite.png')} />
                      <Image className={item.isFavorite == '0' ? "img" : "none"} onClick={this.favoriteDel.bind(this, item._id)} src={require('../../asset/imgs/favorite2.png')} />
                    </View>
                  </View>
                  <View className="item-title">{item.title}</View>
                  <View className="item-case">
                    <View className="i-area">
                      <Image className="icon" src={require("../../asset/imgs/mj.png")} />{item.acre}㎡
                    <Image className="icon left" src={require("../../asset/imgs/ys.png")} />{item.sum / 10000}万
                  </View>
                    <View className="i-num">NO:{item.itemNumber}</View>
                  </View>
                  <View className="item-name">{item.companyName}</View>
                </View>
              )
            })}
          </View>
        </View>
        {isShowDialog && <Dialog title="成为欢乐家会员海量方案等你来选" onHandleDialog={this.handleDialog} />}
        <AtToast
          isOpened={isShowToast}
          text={msg}
          duration={2000}
        ></AtToast>
      </View>
    )
  }
}

export default CompanyDetail
